<template>
  <div class="aside">
    <div class="h230">
      <div
        class="all"
        @mouseenter="fileChange($event)"
        @mouseleave="fileChange1($event)"
      >
        <span class="top" :class="isFileShow == true ? 'change' : 'change1'"
          ><i class="iconfont icon-wenjian"></i
        ></span>
        <span
          class="bottom"
          :class="isFileShow == true ? 'change2' : 'change3'"
        >
          免费 <br />
          资料
        </span>
        <span class="freeFile" v-if="isFileShow == true"
          ><img src="@/assets/imgs/course-index_slices/gzh.jpg" alt=""><span class="sj"></span
        ></span>
      </div>
      <div
        class="all"
        @mouseenter="serveChange($event)"
        @mouseleave="serveChange1($event)"
      >
        <span class="top" :class="isServeShow == true ? 'change' : 'change1'"
          ><i class="iconfont icon-xiaoxi4"></i
        ></span>
        <span
          class="bottom"
          :class="isServeShow == true ? 'change2' : 'change3'"
        >
          客服 <br />
          咨询
        </span>
        <span class="freeFile" v-if="isServeShow == true"
          ><img src="@/assets/imgs/course-index_slices/kf.jpg" alt=""><span class="sj"></span
        ></span>
      </div>
      <div
        class="all"
        @mouseenter="talkChange($event)"
        @mouseleave="talkChange1($event)"
      >
        <span class="top" :class="isTalkShow == true ? 'change' : 'change1'"
          ><i class="iconfont icon-xiaoxi3"></i
        ></span>
        <span
          class="bottom"
          :class="isTalkShow == true ? 'change2' : 'change3'"
        >
          进群 <br />
          讨论
        </span>
        <span class="freeFile" v-if="isTalkShow == true"
          ><img src="@/assets/imgs/course-index_slices/kf.jpg" alt=""><span class="sj"></span
        ></span>
      </div>
      <div
        class="all"
        @mouseenter="linkChange($event)"
        @mouseleave="linkChange1($event)"
      >
        <span class="top" :class="isLinkShow == true ? 'change' : 'change1'"
          ><i class="iconfont icon-iconset0269"></i
        ></span>
        <span
          class="bottom"
          :class="isLinkShow == true ? 'change2' : 'change3'"
        >
          联系 <br />
          客服
        </span>
        <span v-if="isLinkShow == true" class="tel-num"
          >+61 434 033 647 <span class="sj"></span
        ></span>
      </div>
    </div>
    <!-- <div class="h240">
      <div>
        免费 <br />
        资料
      </div>
      <div>
        <i class="iconfont icon-xiaoxi4"></i>
      </div>
      <div><i class="iconfont icon-xiaoxi3"></i></div>
      <div>
        <i class="iconfont icon-iconset0269"></i>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      isLinkShow: false, // 客服电话是否显示
      isTalkShow: false,
      isServeShow: false,
      isFileShow: false,
      mouseenter: false
    }
  },
  methods: {
    fileChange () {
      this.isFileShow = true
    },
    fileChange1 () {
      this.isFileShow = false
    },
    serveChange () {
      this.isServeShow = true
    },
    serveChange1 () {
      this.isServeShow = false
    },
    talkChange () {
      this.isTalkShow = true
    },
    talkChange1 () {
      this.isTalkShow = false
    },
    linkChange () {
      this.isLinkShow = true
    },
    linkChange1 () {
      this.isLinkShow = false
    },
  },
  created () {
  }
}
</script>

<style lang="less" scoped>
.freeFile {
  position: absolute;
  right: 70px;
  bottom: 0px;
  background: #ffffff;
  box-shadow: 0px 0px 0.3125rem 0px rgba(0, 0, 0, 0.2);
  border-radius: 0.3125rem;
  img{
    width: 7.875rem;
    height: 7.875rem;
    margin: .375rem;
  }
  .sj {
    position: absolute;
    transform: rotate(45deg);
    border: 1px solid #eee;
    border-left: #fff;
    border-bottom: #fff;
    background-color: #fff;
    width: 15px;
    height: 15px;
    right: -0.4rem;
    bottom: 1.125rem;
  }
}
.all {
  // overflow: hidden;
  position: relative;
  padding-right: 25px;
  padding-top: 10px;
  .top {
    position: absolute;
    top: 4px;
    z-index: 100;
  }
  .bottom {
    position: absolute;
    top: 4px;
    z-index: 100;
  }
}
.all .change {
  animation: myMou 0.5s;
  animation-fill-mode: forwards;
}
.all .change1 {
  animation: myMou1 0.5s;
  animation-fill-mode: forwards;
}
.all .change2 {
  animation: myMou2 0.5s;
  animation-fill-mode: forwards;
}
.all .change3 {
  animation: myMou3 0.5s;
  animation-fill-mode: forwards;
}
@keyframes myMou {
  0% {
    // margin-top: 0px;
    transform: scale(1);
    opacity: 1;
  }
  100% {
    // margin-top: -200px;
    opacity: 0;
    transform: scale(0);
  }
}
@keyframes myMou1 {
  0% {
    // margin-top: -200px;
    opacity: 0;
    transform: scale(0);
  }
  100% {
    // margin-top: 0px;
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes myMou2 {
  0% {
    // margin-top: 0px;
    transform: scale(0);
    opacity: 0;
  }
  100% {
    // margin-top: -200px;
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes myMou3 {
  0% {
    // margin-top: -200px;
    opacity: 1;
  }
  100% {
    // margin-top: 0px;
    opacity: 0;
  }
}
.aside {
  position: fixed;
  right: 3.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18.75rem;
  height: 28.125rem;
  z-index: 999;
  .h230 {
    height: 14.375rem;
    position: absolute;
    right: 0;
    bottom: 0;
    div {
      width: 3.125rem;
      height: 3.125rem;
      background: #000000;
      box-shadow: 0px 0px .3125rem 0px rgba(0, 0, 0, 0.2);
      opacity: 0.5;
      border-radius: .1875rem;
      margin-bottom: .625rem;
      color: #fff;
      font-size: 0.875rem;
      text-align: center;
      padding-top: 0.25rem;
      cursor: pointer;
      .iconfont {
        font-size: 1.875rem;
      }
      .tel-num {
        position: absolute;
        right: 4.5rem;
        bottom: 0px;
        width: 10rem;
        height: 3.125rem;
        line-height: 3.125rem;
        font-size: 1rem;
        color: #333;
        background: #ffffff;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
        border-radius: .3125rem;
        font-weight: bold;
      }
      .sj {
        position: absolute;
        transform: rotate(45deg);
        border: 1px solid #eee;
        border-left: #fff;
        border-bottom: #fff;
        background-color: #fff;
        width: .9375rem;
        height: .9375rem;
        right: -0.4rem;
        bottom: 1.125rem;
      }
    }
  }
  .h240 {
    height: 15rem;
    position: absolute;
    top: 0;
    left: 13.625rem;
    div {
      width: 3.125rem;
      height: 3.125rem;
      background: #000000;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
      opacity: 0.5;
      border-radius: 3px;
      margin-bottom: 10px;
      color: #fff;
      font-size: 0.875rem;
      text-align: center;
      padding-top: 0.25rem;
      cursor: pointer;
      .iconfont {
        font-size: 1.875rem;
      }
    }
  }
}
</style>
